<script setup lang="ts">
import { ref, computed } from 'vue'; 
import router from '@/router';
import { Dialog } from 'vant';

// 地址和个人信息的状态管理
const address = ref({
    name: 'XX公司',
    contact: {
        person: '吴先生',
        phone: '15350289607'
    }
});

// 菜单项
const items = ref([
    {
        id: 1, name: '麻辣烫', active: true, foods: [
            {
                name: '杨国福麻辣烫', sales: 1099, price: 18.99, img: 'https://img0.baidu.com/it/u=42964131,4203922624&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                details: '杨国福是一个麻辣烫品牌，采用中草骨汤作为汤底，同时提供应季蔬菜、肉类等产品，并配有数十种小料产品。主要通过线下门店为用户提供餐饮服务，同时提供线上预订以及送货上门等服务'
            },
        ]
    },
    // 其他菜单项...
]);

// 计算合计价格
const total = computed(() => {
    const restaurantPrice = items.value.reduce((sum, item) => {
        return sum + item.foods.reduce((foodSum, food) => foodSum + food.price, 0);
    }, 0);
    const deliveryFee = 10; // 假设配送费为固定值
    return (restaurantPrice + deliveryFee).toFixed(2);
});

// 处理手机号显示
const maskedPhone = computed(() => {
    const phone = address.value.contact.phone;
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
});

// 下单处理
async function handleOrder() {
    const confirmed = await Dialog.confirm({
        title: '确认支付',
        message: '确定要支付吗？',
        confirmButtonColor: '#1EC28A'
    });
    if (confirmed) {
        try {
            await simulateOrder();
            Dialog.alert({
                message: '下单成功！',
                confirmButtonColor: '#1EC28A'
            });
            // 跳转到订单成功页面
            router.push('/order-success'); 
        } catch (error) {
            console.error('下单失败:', error);
            Dialog.alert({
                message: '下单失败，请稍后重试。',
            });
        }
    }
}

// 模拟下单逻辑
async function simulateOrder() {
    return new Promise((resolve, reject) => {
        const isSuccess = true; // 假模拟总是成功
        if (isSuccess) {
            resolve('下单成功！');
            
        } else {
            reject(new Error('下单失败'));
        }
    });
}

// 确认返回
function handleBack() {
    Dialog.confirm({
        title: '确认取消',
        message: '确定要取消订单吗？',
        confirmButtonColor: '#1EC28A'
    }).then(() => {
        router.push('/home'); // 返回首页或其他页面
    }).catch(() => {
        // 取消逻辑无需处理
    });
}
</script>


<template>
    <div class="settlement">
        <div class="container">
            <div class="return" @click="handleBack">
                <i></i>
            </div>
            <router-link to="/address" class="address">
                <van-icon name="location" />
                <div class="text">
                    <span>{{ address.name }}</span>
                    <van-tag type="success">公司</van-tag>
                    <div class="my">
                        <span>{{ address.contact.person }}</span>
                        <span>{{ maskedPhone }}</span>  
                    </div>
                </div>
                <van-icon name="arrow" />
            </router-link>
            <div class="box" v-for="(item, index) in items" :key="index">
                <div class="img" :style="{ backgroundImage: `url(${item.foods[0]?.img})` }"></div>
                <div class="text">
                    <span>{{ item.foods[0]?.name  }}</span> 
                    <div class="main">
                        <span>月售:</span>
                        <span>{{ item.foods[0]?.sales }}</span> 
                    </div>
                    <div class="rich">
                        <span>￥{{ item.foods[0]?.price.toFixed(2) }}</span>
                    </div>
                </div>
            </div>
            <div class="count">
                <div class="richbox">
                    <div>配送费</div>
                    <div>￥10.00</div>
                </div>
                <div class="addbox">
                    <div>合计</div>
                    <div>￥{{ total }}</div>
                </div>
                <div class="button">
                    <button @click="handleOrder">结算</button>
                </div>
            </div>
        </div>
    </div>
</template>



<style lang="less" scoped>
.settlement {
    width: 100%;
    background-color: #FFFFFF;

    .return i {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(../assets/img/return.png);
        background-size: cover;
        margin-top: 20px;
        margin-left: 10px;
    }

    .address {
        display: flex;
        align-items: center;
        width: 100%;
        height: 74px;
        background-color: #FFFFFF;
        border-radius: 16px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

        .van-icon:nth-child(1) {
            display: inline-block;
            width: 24px;
            height: 24px;
            color: #1EC28A;
            margin: 0 20px;
        }

        .text {
            font-size: 16px;
            font-weight: 600;

            span {
                margin-right: 5px;
            }

            .my {
                margin-top: 5px;
            }
        }

        .van-icon:last-child {
            display: inline-block;
            width: 24px;
            height: 24px;
            color: #ccc;
            margin-left: 100px;
        }
    }

    .box {
        width: 100%;
        height: 108px;
        margin-top: 20px;
        display: flex;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

        .text {
            margin-top: 10px;
            margin-left: 15px;

            span {
                font-size: 16px;
                font-weight: bold;
            }

            .main span {
                font-size: 12px;
                margin-right: 5px;
                color: #c4c4c4;
            }

            .rich span {
                margin-left: 150px;
                font-size: 18px;
                color: red;
            }
        }

        .img {
            width: 108px;
            height: 108px;
            border-radius: 16px;
            background-size: cover;
            background-position: center;
        }
    }

    .count {
        width: 100%;
        height: 100px;
        margin-top: 30px;
        font-size: 13px;
        .richbox, .debox, .addbox {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            color: #000;
        }

        .addbox {
            color: red;
        }
    }
    .button button {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        width: 160px;
        height: 50px;
        border-radius: 25px;
        background-color: #1EC28A;
        color: #ffffff;
    }
}
</style>





